<!-- 门店列表 -->
<template>
	<view>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
		<u-navbar title="选择预约门店" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<scroll-view class="scroll-view" scroll-y="true" @scrolltolower="scrolltolower" :style="{height:scrollViewHidht+'px'}">
			<view v-for="item in storeList" :key="item.id">
				<view class="store-item coreshop-flex coreshop-justify-between coreshop-btn-all" @tap="selStore(item)">
					<view class="coreshop-flex coreshop-align-center coreshop-btn-all">
						<view class="img-box flex-shink">
							<image class="store-img" :src="item.logoImage" mode="aspectFill" lazy-load></image>
						</view>
						<view class="item-left coreshop-flex coreshop-flex-direction coreshop-align-start coreshop-btn-all">
							<view class="coreshop-flex coreshop-align-center coreshop-justify-between coreshop-btn-all">
								<text class="store-title">{{ item.storeName }}</text>
								<radio 
									style="transform: scale(0.7);" 
									:checked="store.id === item.id" 
									color="#ED174D"
									:class="{ checked: store.id == item.id }">
								</radio>
							</view>
							<text class="store-content">{{ item.address }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- <view class="coreshop-bg-white coreshop-card-hight-box" /> -->
		<!--底部-->
		<view class="coreshop-foot-hight-view" />
		<view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom coreshop-text-center coreshop-padding-10">
			<u-button class='coreshop-bg-red' type="success" color="#ED174D" size="large" @click="saveStore">确认</u-button>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				page:1,
				limit: 20,
				storeList: [],
				scrollViewHidht: 0,
				loadmore: {
					status:'loadmore'
				},
				// storeId: uni.getStorageSync('userStore')
				store: {
					id: '',
					name: '',
				}
			};
		},
		onReady(){
			let _this = this
			uni.getSystemInfo({
				success(res){
					_this.phoneHeight = res.windowHeight
					let view = uni.createSelectorQuery().select('.scroll-view')
					view.boundingClientRect(data=> {
						_this.navHeight = data.height
						_this.scrollViewHidht = _this.phoneHeight - _this.navHeight - res.safeAreaInsets.bottom - 130
					}).exec()
				}
			})
		},
		computed: {
			...mapState(['userStore']),
		},
		onShow() {
			this.page = 1
			this.storeList = []
			this.getStoreAddress();
			// this.store = {
			// 	id: this.userStore.id,
			// 	name: this.userStore.name
			// }
		},
		methods: {
			// 选择门店
			selStore(store) {
				this.store = {
					id: store.id,
					name: store.storeName
				}
			},
			// 确认门店
			saveStore() {
				uni.$emit('store', {
					storeName: this.store.name,
					storeId: this.store.id
				})
				uni.navigateBack()
			},
			scrolltolower(){
				if (this.loadmore.status === 'loadmore') {
					this.getStoreAddress()
				}
			},
			//获取门店列表
			getStoreAddress() {
				let _this = this;
				wx.getFuzzyLocation({
					type: 'wgs84',
					success(res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
					},
					fail: function() {
						_this.$u.toast("获取您的经纬度坐标失败")
					},
					complete: function(res) {
						if (!_this.longitude || !_this.latitude) {
							_this.longitude = '0';
							_this.latitude = '0';
						}
						let data = {
							// 'key': _this.key,
							'longitude': _this.longitude,
							'latitude': _this.latitude,
							'page': _this.page,
							'limit': _this.limit,
						}
						_this.$u.api.storeList(data).then(e => {
							if (e.status) {
								_this.storeList = [..._this.storeList, ...e.data]
								if (e.otherData.totalCount > _this.storeList.length) {
									_this.loadmore.status = 'loadmore'
									_this.page++
								} else {
									// 数据已加载完毕
									_this.loadmore.status = 'nomore'
								}
							} else {
								_this.$u.toast("门店数据获取失败");
							}
						}).catch(err=>{
							_this.$u.toast(err);
						})
					}
				})
			},
		}
	};
</script>


<style lang="scss" scoped>
	@import "storeList.scss";
</style>